<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投诉建议</title>
    <link rel="stylesheet" href="Advice.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div>
                <span>您好！可将您的问题或建议通过留言告诉我们，感谢您对我们工作的关心和支持！</span>
            </div>
        </div>
        
        <div class="content">
            <div class="section-box">
                <div class="section">
                    <div class="section-title required">问题描述</div>
                    <textarea 
                        class="textarea" 
                        placeholder="请输入描述问题（不超过500字符）" 
                        id="problemDesc"
                        maxlength="500"
                    ></textarea>
                </div>
            </div>
            
            <div class="section-box">
                <div class="section">
                    <div class="section-title required">佐证材料</div>
                  
                    <div class="upload-area">
                        <label class="upload-item" for="fileUpload">
                            <img src="../../assets/icons/照相机.svg" class="camera-icon" alt="摄像头图标">
                            <span>上传</span>          
                            <span>视频/图片</span>
                            <input type="file" id="fileUpload" multiple accept="image/*,video/*" style="display: none;">
                        </label>
                        
                        <div id="uploadedFilesContainer"></div>
                    </div>

                    <span class="upload-hint">上传的佐证材料不得超过3个</span>
                </div>
            </div>
            
            <div class="section-box">
                <div class="section">
                    <div class="section-title required">投诉详情</div>
                    <div class="category-grid" id="categoryGrid">
                        <!-- 类别通过 JS 动态生成 -->
                    </div>
                </div>
            </div>
            
            <div class="section-box">
                <div class="section">
                    <div class="section-title required">您的联系方式</div>
                    
                    <div class="contact-method">
                        <label class="gender-option">
                            <input type="radio" name="gender" value="male" checked>先生
                        </label>
                        <label class="gender-option">
                            <input type="radio" name="gender" value="female">女士
                        </label>
                    </div>
                    
                    <input 
                        type="tel" 
                        class="phone-input" 
                        placeholder="请填写您的联系方式" 
                        id="phoneInput"
                        maxlength="11"
                    >
                </div>
            </div>

            <div class="bottom-btn-container">
                <button class="submit-btn" id="submitBtn">提交</button>
            </div>
        </div>
        
        <div class="success-modal" id="successModal" style="display: none;">
            <div class="modal-content">
                <div class="modal-top">
                    <img src="../../assets/images/提交成功.png" class="success-image" alt="提交成功">
                </div>
                <div class="modal-bottom">
                    <div class="modal-desc">您的意见已成功提交</div>
                    <button class="modal-btn" id="modalBtn">返回</button>
                </div>
            </div>
        </div>
    </div>

    <script src="Advice.js"></script>
</body>
</html>
